<template>
  <div class="system-user-dialog-container">
    <el-dialog title="查看应用访问信息" v-model="state.dialog.isShowDialog" width="1000px">

      <el-form ref="appKeyDialogFormRef" size="default" label-width="auto">
        <el-row :gutter="35">
          <el-col :span="24" class="mb20">
            <el-alert title="以下信息，请一定要保密" type="error" effect="light" :closable="false" :center="true"/>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="24" class="mb20">
            <el-text class="mx-1" size="large">appId: {{ state.appId }}</el-text>
          </el-col>
        </el-row>

        <el-row :gutter="35">
          <el-col :span="24" class="mb20">
            <el-text class="mx-1" size="large">secretKey: {{ state.appSecret }}</el-text>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button @click="copyText">一键复制</el-button>
				</span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts" name="appKeyDialog">
import {nextTick, onMounted, reactive, ref} from 'vue';
import type {FormRules, UploadProps, FormInstance} from 'element-plus'
import {ElMessage} from "element-plus";

const textToCopy = ref('要复制的文本');
// 定义变量内容
const appKeyDialogFormRef = ref<FormInstance>();
const state = reactive({
  appId: '',
  appSecret: '',
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
});
// 打开弹窗
const openDialog = async (type: string, row: RowAppsType) => {
  state.appId = row.appId;
  state.appSecret = row.appSecret;
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
const copyText = async () => {
  try {
    textToCopy.value = `appId: ${state.appId}  secretKey: ${state.appSecret}`
    await navigator.clipboard.writeText(textToCopy.value);
    ElMessage.success('复制成功！');
  } catch (err) {
    console.error('复制失败', err);
    ElMessage.error('复制失败！');
  }
};
// 暴露变量
defineExpose({
  openDialog,
});
</script>
<style scoped lang="scss">
.croppers-container {
  .cropper-img-warp {
    text-align: center;

    .cropper-img {
      margin: auto;
      width: 150px;
      height: 150px;
      border-radius: 100%;
    }
  }
}
</style>
